<template>
  <div class="mod-sp__spmatchitemteam">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.matchName" placeholder="赛事" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.item" placeholder="赛项" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.teamName" placeholder="代表队名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.groupName" placeholder="队伍名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.realName" placeholder="选手姓名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.status" placeholder="选择状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="审核中" value="0"></el-option>
          <el-option label="报名成功" value="1"></el-option>
          <el-option label="完赛" value="2"></el-option>
          <el-option label="已取消/弃权" value="3"></el-option>
          <el-option label="比赛中" value="4"></el-option>
          <el-option label="已获晋级赛资格" value="5"></el-option>
          <el-option label="晋级成功" value="6"></el-option>
          <el-option label="弃权" value="7"></el-option>
          <el-option label="驳回" value="8"></el-option>
          <el-option label="待确认" value="9"></el-option>
          <el-option label="报名已截止" value="10"></el-option>
          <el-option label="已审核" value="-1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t("query") }}</el-button>
        <el-button @click="passBatchHandle()" v-if="hasPermission('sp:spmatchitemteam:update')" type="primary">批量审核</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="hasPermission('sp:spmatchitemteam:updateStatus')" type="danger" @click="updateStatusHandle()">重置为报名成功</el-button>
      </el-form-item>
      <el-form-item>
        <el-tag size="big">{{ matchItem ? matchItem.match_name : "" }}</el-tag>
        <el-tag size="big" style="margin-left: 10px">{{ matchItem ? matchItem.item_name : "" }}</el-tag>
      </el-form-item>
      <!--
      <el-form-item>
        <el-button type="info" @click="exportHandle()">{{ $t("export") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="hasPermission('sp:spmatchitemteam:save')" type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="hasPermission('sp:spmatchitemteam:delete')" type="danger" @click="deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-form-item>
      -->
    </el-form>
    <div>
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="审核中" name="first"> </el-tab-pane>
          <el-tab-pane label="已审核" name="second" lazy> </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="matchName" label="赛事" header-align="center" align="center"></el-table-column>
      <el-table-column prop="item" label="赛项" header-align="center" align="center"></el-table-column>
      <el-table-column prop="teamName" label="代表队名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="groupName" label="队伍名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="dictLabel" label="组别" header-align="center" align="center"></el-table-column>
      <el-table-column prop="realName" label="选手" header-align="center" align="center"></el-table-column>
      <el-table-column prop="createDate" label="参赛时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status === 0" size="small" type="">审核中</el-tag>
          <el-tag v-else-if="scope.row.status === 1" size="small" type="">报名成功</el-tag>
          <el-tag v-else-if="scope.row.status === 2" size="small" type="">完赛</el-tag>
          <el-tag v-else-if="scope.row.status === 3" size="small" type="">已取消/弃权</el-tag>
          <el-tag v-else-if="scope.row.status === 4" size="small" type="">比赛中</el-tag>
          <el-tag v-else-if="scope.row.status === 5" size="small" type="">已获晋级赛资格</el-tag>
          <el-tag v-else-if="scope.row.status === 6" size="small" type="">晋级成功</el-tag>
          <el-tag v-else-if="scope.row.status === 7" size="small" type="">弃权</el-tag>
          <el-tag v-else-if="scope.row.status === 8" size="small" type="">驳回</el-tag>
          <el-tag v-else-if="scope.row.status === 9" size="small" type="">待确认</el-tag>
          <el-tag v-else-if="scope.row.status === 10" size="small" type="">报名已截止</el-tag>
          <el-tag v-else size="small" type="">其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button type="text" size="small" @click="detailHandle(scope.row)">详情</el-button>
          <el-button type="text" size="small" v-if="scope.row.status === 0 && hasPermission('sp:spmatchitemteam:update')" @click="passHandle(scope.row.id, '1')">审核</el-button>
          <el-button type="text" size="small" v-if="(scope.row.status === 0 || scope.row.status === 1) && hasPermission('sp:spmatchitemteam:update')" @click="passHandle(scope.row.id, '8')">驳回</el-button>
          <el-button v-if="hasPermission('sp:spmatchitemteam:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <!-- 弹窗, 发送短信 -->
    <detail v-if="detailVisible" ref="send" @refreshDataList="getDataList"></detail>
  </div>

  <upload v-if="uploadVisible" ref="upload" uploadurl="/sp/spmatchitemteam/importScore" @refreshDataList="getDataList"></upload>
  <upload v-if="uploadVisible2" ref="upload2" uploadurl="/sp/spmatchitemteam/importPormotion" @refreshDataList="getDataList"></upload>
  <upload v-if="uploadVisible3" ref="upload3" uploadurl="/sp/spmatchitemteam/importCertificate" downloadurl="/sp/spmatchitemteam/exportCertificateError" @refreshDataList="getDataList"></upload>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import { defineComponent, reactive, toRefs } from "vue";
import AddOrUpdate from "./spmatchitemteam-add-or-update.vue";
import Detail from "./spmatchitemteam-detail.vue";
import baseService from "@/service/baseService";
import Upload from "./score-upload.vue";
import { IObject } from "@/types/interface";
export default defineComponent({
  components: {
    AddOrUpdate,
    Detail,
    Upload
  },
  setup() {
    const state = reactive({
      uploadVisible: false,
      uploadVisible2: false,
      uploadVisible3: false,
      getDataListURL: "/sp/spmatchitemteam/signRecord",
      createdIsNeed: false,
      activatedIsNeed: false,
      getDataListIsPage: true,
      exportURL: "/sp/spmatchitemteam/export",
      deleteURL: "/sp/spmatchitemteam",
      deleteIsBatch: true,
      dataForm: {
        matchName: "",
        item: "",
        matchItemId: "",
        teamId: "",
        teamName: "",
        isRise: "",
        status: "0",
        matchId: "",
        realName: "",
        groupName: ""
      },
      matchItem: {
        match_name: "",
        item_name: ""
      },
      activeName: "first",
      detailVisible: false,
      detailId: ""
    });
    return { ...useView(state), ...toRefs(state) };
  },
  watch: {},
  mounted() {
    //获取上个页面传来的参数
    this.dataForm.matchItemId = this.$route.query.id + "";
    this.dataForm.matchId = this.$route.query.matchId + "";
    this.queryBymatchItemId(this.dataForm.matchItemId);
    this.query();
  },
  methods: {
    detailHandle(row: IObject) {
      this.detailVisible = true;
      this.$nextTick(() => {
        this.$refs.send.dataForm.row = row;
        this.$refs.send.init();
      });
    },
    // 调用后台方法rise，晋级当前参赛小组
    riseHandle(id?: string, status?: string) {
      this.$confirm("确认晋级？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.post("/sp/spmatchitemteam/rise", { id: id, status: status }).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    },
    passHandle(id?: string, status?: string) {
      this.$confirm("确认审核通过？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.post("/sp/spmatchitemteam/pass", { id: id, status: status }).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    },
    uploadScore() {
      this.uploadVisible = true;
      this.$nextTick(() => {
        this.$refs.upload.init();
      });
    },
    uploadPormotion() {
      this.uploadVisible2 = true;
      this.$nextTick(() => {
        this.$refs.upload2.init();
      });
    },
    uploadCertificate() {
      this.uploadVisible3 = true;
      this.$nextTick(() => {
        this.$refs.upload3.init();
      });
    },
    // 批量审核通过
    passBatchHandle() {
      // 循环取dataListSelections的id
      let ids: string[] = [];
      for (let i = 0; i < this.dataListSelections!.length; i++) {
        let id = this.dataListSelections![i].id;
        let status = this.dataListSelections![i].status;
        if (status !== 0) {
          return this.$message.error("请选择待审核的数据");
        }
        ids.push(this.dataListSelections![i].id);
      }
      if (ids.length === 0) {
        return this.$message.error("请选择要审核的数据");
      }

      this.$confirm("确认审核通过？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.post("/sp/spmatchitemteam/passBatch", ids).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    },
    handleClick(tab: any, event: any) {
      console.log(tab.props.name);
      if (tab.props.name === "first") {
        this.dataForm.status = "0";
      } else {
        this.dataForm.status = "-1";
      }
      this.query();
    },
    /**
     * 重置成报名成功
     */
    updateStatusHandle() {
      // 循环取dataListSelections的id
      let ids: string[] = [];
      for (let i = 0; i < this.dataListSelections!.length; i++) {
        ids.push(this.dataListSelections![i].id);
      }
      if (ids.length === 0) {
        return this.$message.error("请选择要重置的数据");
      }
      this.$confirm("确认重置成报名成功？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.post("/sp/spmatchitemteam/updateStatus", { id: ids[0], status: "1" }).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    },

    /**
     * 查询score配置
     * @param matchItemId
     */
    queryBymatchItemId(matchItemId: any) {
      baseService.post("/sp/spmatchitem/queryBymatchItemId", { id: matchItemId }).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        } else {
          console.log(res.data);
          this.matchItem = res.data;
        }
      });
    }
  }
});
</script>
